<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/assets/iziModal/css/iziModal.css"/>
</head>
<body>
<div class="am-g am-margin-top-lg">
    <div class="am-u-sm-3 am-u-sm-offset-9 am-text-right am-u-end">
        <div class="am-input-group am-input-group-sm">
            <input id="i_search" type="text" class="am-form-field am-input-sm" placeholder="输入用户名称"/>
            <span class="am-input-group-btn">
                            <button class="am-btn  am-btn-primary am-btn-sm am-icon-search" type="button" onclick="searchQuery();"></button>
                        </span>
        </div>
    </div>
</div>
<table width="100%" class="am-table am-table-striped am-table-bordered
            am-table-compact am-text-nowrap am-table-hover" id="table">
    <thead>
    <tr class="am-text-center">
        <td>用户编号</td>
        <td>用户名</td>
        <td>部门</td>
        <td>人员名称</td>
        <td>联系电话</td>
        <td>是否可用</td>
        <td>上次登录时间</td>
        <td>角色</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody class="am-text-center"></tbody>
</table>

<div id="modal" class="iziModal">
    <div class="am-g am-margin-top">
        <div class="am-u-sm-12">
            <form class="am-form am-form-horizontal">
                <input type="hidden" id="memberId"/>
                <div class="am-form-group">
                    <label for="i_username" class="am-u-sm-3 am-form-label">用户名</label>
                    <div class="am-u-sm-9">
                        <input type="text" id="i_username" disabled="disabled" placeholder="输入用户名"/>
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="i_usable" class="am-u-sm-3 am-form-label">是否可用</label>
                    <div class="am-u-sm-9">
                        <select id="i_usable">
                            <option value="1">可用</option>
                            <option value="0">不可用</option>
                        </select>
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="i_role" class="am-u-sm-3 am-form-label">角色</label>
                    <div class="am-u-sm-9">
                        <select id="i_role" multiple="multiple">
                            <#list roles as role>
                                <option value="${role.roleId}">${role.name}</option>
                            </#list>
                        </select>
                    </div>
                </div>
                <div class="am-form-group am-text-center">
                    <button class="am-btn am-btn-default submit">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="password-modal" class="iziModal">
    <div class="am-g am-margin-top">
        <div class="am-u-sm-12">
            <form class="am-form am-form-horizontal">
                <input type="hidden" id="p-memberId"/>
                <div class="am-form-group">
                    <label for="p-oldPassword" class="am-u-sm-2 am-form-label">旧密码</label>
                    <div class="am-u-sm-10">
                        <input type="password" id="p-oldPassword" placeholder="输入旧密码"/>
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="p-newPassword" class="am-u-sm-2 am-form-label">新密码</label>
                    <div class="am-u-sm-10">
                        <input type="password" id="p-newPassword" placeholder="输入新密码"/>
                    </div>
                </div>
                <div class="am-form-group am-text-center">
                    <button class="am-btn am-btn-default submit">提交</button>
                </div>

            </form>
        </div>
    </div>
</div>

<script src="/assets/iziModal/js/jquery-2.2.4.js"></script>
<script src="/assets/iziModal/js/iziModal.js"></script>
<script src="/assets/amazeui/js/amazeui.js"></script>
<script src="/assets/amazeui/js/amazeui.datatables.min.js"></script>
<script>

    var table;
    $(function () {
        loadTable();
        init();
    });

    function searchQuery() {
        table.ajax.reload();
    }

    function edit(row) {
        $("#memberId").val(row.memberId);
        $("#i_username").val(row.username);
        $("#i_usable").val(row.usable);
        $("#i_role").val(row.roleIds);
        $("#modal").iziModal("setTitle","修改用户");
        $("#modal").iziModal('open');
    }

    function changePassword(memberId){

        $("#p-memberId").val(memberId);
        $("#password-modal").iziModal("setTitle","修改密码");
        $("#password-modal").iziModal("open");

    }

    function init() {
        $("#modal").iziModal({
            title: 'title',
            icon: 'icon-star',
            headerColor: '#00af66',
            width: 600,
            transitionIn: 'bounceInUp',
            transitionOut: 'bounceOutDown',
            focusInput: true,
            overlayClose: false,
            closeOnEscape: false,
            openFullscreen: false
        });
        $("#modal").on('click','.submit',function (event) {
            event.preventDefault();
            var memberId = $("#memberId").val();
            var username = $("#i_username").val();
            var usable = $("#i_usable").val();
            var roleId = $("#i_role").val().toString();
            console.info("memberId:"+memberId);
            console.info("username:"+username);
            console.info("usable:"+usable);
            console.info("roleId:"+roleId);
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: '/sys/member/save',
                data: {
                    memberId: memberId,
                    username: username,
                    usable: usable,
                    roleId: roleId
                },
                success: function (result) {
                    if(result.code!=0){
                        alert(result.errMsg);
                    }else{
                        $("#modal").iziModal('close');
                        table.draw(false);
                    }
                }
            });
        });

        $("#password-modal").iziModal({
            title: 'title',
            icon: 'icon-star',
            headerColor: '#00af66',
            width: 600,
            transitionIn: 'bounceInUp',
            transitionOut: 'bounceOutDown',
            focusInput: true,
            overlayClose: false,
            closeOnEscape: false,
            openFullscreen: false
        });
        $("#password-modal").on('click','.submit',function(event){
            event.preventDefault();
            var memberId = $("#p-memberId").val();
            var oldPassword = $("#p-oldPassword").val();
            var newPassword = $("#p-newPassword").val();
            if(!oldPassword || oldPassword.length==0){
                alert("请输入旧密码");
                return;
            }
            if(!newPassword || newPassword.length==0){
                alert("请输入新密码");
                return;
            }
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: '/sys/member/changePassword',
                data: {
                    memberId: memberId,
                    oldPassword: oldPassword,
                    newPassword: newPassword
                },
                success: function (result) {
                    if(result.code!=0){
                        alert(result.errMsg);
                    }else{
                        $("#password-modal").iziModal('close');
                        table.draw(false);
                    }
                }
            });
        });
    }

    function loadTable() {
        table = $("#table").DataTable({
            ordering: false,
            bLengthChange: false,
            ordering: false,
            bSort: false,
            serverSide: true,
            searching: false,
            iDisplayLength: 10,
            ajax: {
                url: "/sys/member/queryList",
                data: function (d) {
                    var key = $("#i_search").val();
                    if(key){
                        d.key = key;
                    }
                }
            },
            columns: [
                {data: "memberId"},
                {data: "username"},
                {data: "deptName"},
                {data: "employeeName"},
                {data: "phoneNum"},
                {data: "usable",render: function (data) {
                    if(data==1){
                        return "可用"
                    }else{
                        return "不可用"
                    }
                }},
                {data: "lastLoginTime"},
                {data: "role",render: function (data,type,row,meta) {
                    return row.roleNames.toString();
                }},
                {
                    data: 'op',
                    render: function (data,type,row,meta){
                        var btn;
                        if(row.usable == 1){
                            btn = "<div>" +
                                    <@shiro.hasPermission name="member:edit">
                                    "<button onclick='edit("+JSON.stringify(row)+");' class='am-btn-xs am-btn am-radius am-btn-secondary'>修改</button> " +
                                    </@shiro.hasPermission>
                                    <@shiro.hasPermission name="member:changePassword">
                                    "<button onclick='changePassword("+row.memberId+");' class='am-btn-xs am-btn am-radius am-btn-secondary'>修改密码</button> " +
                                    </@shiro.hasPermission>
                                    "</div>";
                        }else {
                            btn = "<div>" +
                                    <@shiro.hasPermission name="member:edit">
                                    "<button onclick='edit("+JSON.stringify(row)+");' class='am-btn-xs am-btn am-radius am-btn-secondary'>修改</button> " +
                                    </@shiro.hasPermission>
                                    <@shiro.hasPermission name="member:delete">
                                    "<button onclick='toDel("+row.memberId+");' class='am-btn-xs am-btn am-radius am-btn-warning'>删除</button> "
                                    </@shiro.hasPermission>
                            "</div>";
                        }

                        return btn;
                    }
                }
            ]
        });
    }
</script>
</body>
</html>